<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import '@/assets/js/graphvis.20230812.js';
import '@/assets/js/graphvis.layout.min.js';

const config = ref({
  // 节点配置
  node: {
    label: {
      // 标签配置
      show: true, // 是否显示
      color: '250,250,250', // 字体颜色
      font: 'normal 14px Microsoft YaHei', // 字体大小及类型
      textPosition: 'Middle_Center', // 字体位置
      wrapText: true // 节点包裹文字(该属性为true时只对于字体位置为Middle_Center时有效)
    },
    shape: 'circle', // 节点形状 circle,rect,square,ellipse,triangle,star,polygon,text
    // width: 60, // 节点宽度(只对于shape为rect时有效)
    // height: 60, // 节点高度(只对于shape为rect时有效)
    color: '62,160,250', // 节点颜色
    borderColor: '62,160,250', // 节点边框颜色
    borderWidth: 0, // 节点边框宽度
    borderRadius: 0, // 节点圆角
    lineDash: [0], // 节点边框线条类型 [0] 表示实线 [5,8] 表示虚线 borderWidth > 0有效
    alpha: 1, // 节点透明度
    size: 60, // 节点大小
    selected: {
      // 节点选中后样式
      borderColor: '136,198,255', // 选中时边框颜色
      borderAlpha: 1, // 选中时的边框透明
      borderWidth: 3, // 选中是的边框宽度
      showShadow: true, // 是否展示阴影
      shadowColor: '136,198,255' // 选中是的阴影颜色
    },
    onClick: (event, node) => {
      console.log('node', node);
      node.setImage('http://media.graphvis.cn/%E9%BB%8E%E6%98%8E_6681.jpg'); //设置图片
      //
    },
    ondblClick: (event, node) => {
      node.drawNode = function (ctx) {
        //选中时的绘制效果
        if (this.selected) {
          ctx.save();
          ctx.beginPath();
          ctx.rect(-this.width / 2, -this.height / 2, this.width, this.height);
          ctx.fillStyle = 'rgba(120,220,130,0.3)';
          ctx.fill();
          ctx.closePath();
          ctx.restore();
        }

        var radius = this.radius;
        this.animate = this.animate > 50 ? 10 : this.animate;
        ctx.save();
        ctx.beginPath();
        ctx.arc(0, 0, (radius * 2) / 3, 0, 2 * Math.PI);
        ctx.fillStyle = 'rgba(120,220,130,1)';
        ctx.fill();
        ctx.strokeStyle = '#16C4CB';
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        // 虚线圆环
        ctx.save();
        ctx.beginPath();
        ctx.arc(0, 0, (radius * 2) / 3 + 6, 0, 2 * Math.PI);
        ctx.strokeStyle = '#16C4CB';
        ctx.setLineDash([3, 2]);
        ctx.lineDashOffset = this.animate++;
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        // 外圆环
        ctx.save();
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, 2 * Math.PI);
        ctx.strokeStyle = '#16C4CB';
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        //绘制文字，调用系统内置绘制文字方法
        this.showlabel == true ? this.paintText(ctx) : false;
      };
    }
  },
  // 线条配置
  link: {
    label: {
      // 标签配置
      show: true, // 是否显示
      color: '100,100,200', // 标签颜色
      font: 'normal 10px Arial' // 标签文字大小及类型
    },
    lineType: 'bezier', // 线条类型direct,curver,vlink,hlink,bezier,vbezier,hbezier
    colorType: 'defined', // 连线颜色类型 source:继承source颜色,target:继承target颜色 both:用双边颜色，defined:自定义
    color: '200,200,200', // 线条颜色
    alpha: 0.8, // 连线透明度
    lineWidth: 1, // 连线宽度
    lineDash: [0], // 虚线间隔样式如：[5,8]
    showArrow: true, // 显示箭头
    selected: {
      // 选中时的样式设置
      color: '20,250,50', // 选中时的颜色
      alpha: 1, // 选中时的透明度
      lineWidth: 4, // 选中线条宽度
      showShadow: true, // 显示阴影
      shadowColor: '50,250,50' // 阴影颜色
    },
    onClick: (event, line) => {
      console.log('line', line);
    },
    ondblClick: (event, line) => {}
  },
  highLightNeiber: true, // 相邻节点高度标志
  wheelZoom: 0.8 // 滚轮缩放开关，不使用时不设置[0,1]
});

let visgraph: any = null;
const visDom = ref(null);
const graphData = ref({
  nodes: [
    { id: '1', label: '刘备', type: '兄', x: 100, y: 200, properties: { name: '刘玄德' } },
    { id: '2', label: '关羽', type: '弟', x: 300, y: 600, properties: { name: '关云长' } },
    { id: '3', label: '张飞', type: '弟', x: 500, y: 300, properties: { name: '张翼德' } }
  ],
  links: [
    { source: '1', target: '2', label: '兄弟', properties: { desc: '结拜' } },
    { source: '1', target: '3', label: '兄弟' }
  ]
});
const init = () => {
  // 声明VisGraph ts类型
  const VisGraph: any = (window as any).VisGraph;
  visgraph = new VisGraph(visDom.value, config.value);
  visgraph.clearAll(); //清空原有数据
  visgraph.drawData(graphData.value); //绘制图数据
  // const nodes = visgraph.nodes; //获取节点数据
  // //比如给类型为【男】的节点，显示标签并且绑定双击事件
  // nodes.map(function (node) {
  //   node.dbclick(function (event) {
  //     console.log('双击节点打开配置');
  //     console.log('node', node);
  //     console.log('event', event);
  //   });
  // });

  // //获取图可视化元素中所有的连线
  // const links = visgraph.links;

  // //比如给类型为【男】的节点，显示标签并且绑定双击事件
  // links.map(function (link) {
  //   link.dbclick(function (event) {
  //     console.log('event', event);
  //     console.log('link', link);
  //     console.log('双击连线打开配置');
  //   });
  // });
};

onMounted(() => {
  init();
  setTimeout(() => {
    graphData.value = {
      nodes: [
        {
          id: '838644321',
          label: '192.168.12.164',
          x: 61,
          y: 1416,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2051156877',
          label: '192.168.12.38',
          x: 560,
          y: 1107,
          size: 81,
          color: '96,55,164'
        },
        {
          id: '838644324',
          label: '192.168.12.167',
          x: 1520,
          y: 607,
          size: 81,
          color: '78,173,182'
        },
        {
          id: '-2051156755',
          label: '192.168.12.76',
          x: 1081,
          y: 602,
          size: 81,
          color: '59,213,175'
        },
        {
          id: '838644171',
          label: '192.168.12.119',
          x: -217,
          y: 1211,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '838645127',
          label: '192.168.12.214',
          x: 734,
          y: 1378,
          size: 81,
          color: '96,55,164'
        },
        {
          id: '838645126',
          label: '192.168.12.213',
          x: -153,
          y: 1296,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '1734948971',
          label: '192.168.12.9',
          x: 267,
          y: 1166,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2051156759',
          label: '192.168.12.72',
          x: 986,
          y: 1825,
          size: 81,
          color: '84,211,41'
        },
        {
          id: '838644166',
          label: '192.168.12.114',
          x: 161,
          y: 1430,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2051156883',
          label: '192.168.12.32',
          x: 1156,
          y: 972,
          size: 81,
          color: '59,213,175'
        },
        {
          id: '838645129',
          label: '192.168.12.216',
          x: -112,
          y: 688,
          size: 81,
          color: '52,134,234'
        },
        {
          id: '838644165',
          label: '192.168.12.113',
          x: 395,
          y: 1078,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2051156884',
          label: '192.168.12.31\n192.168.12.31\n192.168.12.31192.168.12.31',
          x: 478,
          y: 973,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '838644164',
          label: '192.168.12.112',
          x: 135,
          y: 1266,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '838645128',
          label: '192.168.12.215',
          x: 572,
          y: 1521,
          size: 81,
          color: '96,55,164'
        },
        {
          id: '838644163',
          label: '192.168.12.111',
          x: 295,
          y: 719,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '838644350',
          label: '192.168.12.172',
          x: -70,
          y: 921,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2007034805',
          label: '10.54.14.6',
          x: 663,
          y: 1467,
          size: 81,
          color: '96,55,164'
        },
        {
          id: '-809256359',
          label: '224.0.0.252',
          x: 225,
          y: 40,
          size: 81,
          color: '179,11,237'
        },
        {
          id: '-809256360',
          label: '224.0.0.251',
          x: 118,
          y: 1038,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2051156912',
          label: '192.168.12.24',
          x: 1189,
          y: 159,
          size: 81,
          color: '78,173,182'
        },
        {
          id: '-2051156911',
          label: '192.168.12.25',
          x: -155,
          y: 802,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '838645252',
          label: '192.168.12.255',
          x: 838,
          y: 812,
          size: 81,
          color: '59,213,175'
        },
        {
          id: '838645248',
          label: '192.168.12.251',
          x: 1138,
          y: 725,
          size: 81,
          color: '59,213,175'
        },
        {
          id: '-1072993729',
          label: '239.255.255.250',
          x: 1375,
          y: 367,
          size: 81,
          color: '78,173,182'
        },
        {
          id: '838645159',
          label: '192.168.12.225',
          x: 339,
          y: 817,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2051156789',
          label: '192.168.12.63',
          x: 1150,
          y: 1192,
          size: 81,
          color: '51,125,127'
        },
        {
          id: '838645160',
          label: '192.168.12.226',
          x: 166,
          y: 809,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '1013191670',
          label: '0.0.0.0',
          x: 1434,
          y: 1456,
          size: 81,
          color: '51,125,127'
        },
        {
          id: '838644198',
          label: '192.168.12.125',
          x: -261,
          y: 989,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '838644195',
          label: '192.168.12.122',
          x: -56,
          y: 1167,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '838644318',
          label: '192.168.12.161',
          x: 494,
          y: 53,
          size: 81,
          color: '179,11,237'
        },
        {
          id: '-2051156699',
          label: '192.168.12.90',
          x: 970,
          y: 532,
          size: 81,
          color: '59,213,175'
        },
        {
          id: '838644258',
          label: '192.168.12.143',
          x: 307,
          y: 1284,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '1807683160',
          label: '111.206.79.144',
          x: 747,
          y: 1963,
          size: 81,
          color: '84,211,41'
        },
        {
          id: '-2051156939',
          label: '192.168.12.18',
          x: 879,
          y: 450,
          size: 81,
          color: '59,213,175'
        },
        {
          id: '-2051156696',
          label: '192.168.12.93',
          x: 13,
          y: 676,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2051156693',
          label: '192.168.12.96',
          x: 110,
          y: 645,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '838644385',
          label: '192.168.12.186',
          x: -12,
          y: 1302,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2051156822',
          label: '192.168.12.51',
          x: 764,
          y: 450,
          size: 81,
          color: '59,213,175'
        },
        {
          id: '201294094',
          label: '192.168.110.193',
          x: -73,
          y: 1416,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '838644412',
          label: '192.168.12.192',
          x: 1182,
          y: 849,
          size: 81,
          color: '59,213,175'
        },
        {
          id: '838644410',
          label: '192.168.12.190',
          x: -143,
          y: 1049,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '201294933',
          label: '192.168.110.255',
          x: -221,
          y: 1704,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2050948375',
          label: '192.168.19.24',
          x: 775,
          y: 1251,
          size: 81,
          color: '96,55,164'
        },
        {
          id: '591595283',
          label: '228.6.7.8',
          x: -300,
          y: 422,
          size: 81,
          color: '52,134,234'
        },
        {
          id: '-910498946',
          label: '255.255.255.255',
          x: 1109,
          y: 1373,
          size: 81,
          color: '51,125,127'
        },
        {
          id: '-2051156846',
          label: '192.168.12.48',
          x: -259,
          y: 1110,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2051156728',
          label: '192.168.12.82',
          x: -227,
          y: 884,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '838644232',
          label: '192.168.12.138',
          x: 209,
          y: 661,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '838644353',
          label: '192.168.12.175',
          x: 838,
          y: 1067,
          size: 81,
          color: '51,125,127'
        },
        {
          id: '838645100',
          label: '192.168.12.208',
          x: 249,
          y: 1379,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2051156852',
          label: '192.168.12.42',
          x: 16,
          y: 805,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '-2051156850',
          label: '192.168.12.44',
          x: 281,
          y: 931,
          size: 81,
          color: '230,28,139'
        },
        {
          id: '838645224',
          label: '192.168.12.248',
          x: 1200,
          y: 1650,
          size: 81,
          color: '84,211,41'
        }
      ],
      links: [
        {
          source: '1013191670',
          target: '-910498946',
          label: ''
        },
        {
          source: '838645129',
          target: '591595283',
          label: ''
        },
        {
          source: '-2050948375',
          target: '-2051156877',
          label: ''
        },
        {
          source: '-2051156693',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644165',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644258',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644163',
          target: '-809256360',
          label: ''
        },
        {
          source: '-2051156728',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644195',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644232',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644321',
          target: '-809256360',
          label: ''
        },
        {
          source: '-2051156696',
          target: '-809256360',
          label: ''
        },
        {
          source: '-2051156846',
          target: '-809256360',
          label: ''
        },
        {
          source: '-2051156852',
          target: '-809256360',
          label: ''
        },
        {
          source: '-2051156884',
          target: '-809256360',
          label: ''
        },
        {
          source: '838645159',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644385',
          target: '-809256360',
          label: ''
        },
        {
          source: '-2051156877',
          target: '-809256360',
          label: ''
        },
        {
          source: '838645129',
          target: '-809256360',
          label: ''
        },
        {
          source: '-2051156850',
          target: '-809256360',
          label: ''
        },
        {
          source: '838645100',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644410',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644198',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644166',
          target: '-809256360',
          label: ''
        },
        {
          source: '201294094',
          target: '-809256360',
          label: ''
        },
        {
          source: '838645160',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644171',
          target: '-809256360',
          label: ''
        },
        {
          source: '-2051156911',
          target: '-809256360',
          label: ''
        },
        {
          source: '1734948971',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644164',
          target: '-809256360',
          label: ''
        },
        {
          source: '838645126',
          target: '-809256360',
          label: ''
        },
        {
          source: '838644350',
          target: '-809256360',
          label: ''
        },
        {
          source: '-2051156877',
          target: '838645127',
          label: ''
        },
        {
          source: '-2051156877',
          target: '838645128',
          label: ''
        },
        {
          source: '-2051156884',
          target: '838644353',
          label: ''
        },
        {
          source: '-2051156877',
          target: '838644353',
          label: ''
        },
        {
          source: '-2051156759',
          target: '838645224',
          label: ''
        },
        {
          source: '-2051156877',
          target: '838645252',
          label: ''
        },
        {
          source: '-2051156877',
          target: '838644165',
          label: ''
        },
        {
          source: '201294094',
          target: '201294933',
          label: ''
        },
        {
          source: '-2051156877',
          target: '-2007034805',
          label: ''
        },
        {
          source: '-2051156912',
          target: '-1072993729',
          label: ''
        },
        {
          source: '838644324',
          target: '-1072993729',
          label: ''
        },
        {
          source: '838644353',
          target: '-910498946',
          label: ''
        },
        {
          source: '-2051156759',
          target: '1807683160',
          label: ''
        },
        {
          source: '838644318',
          target: '-809256359',
          label: ''
        },
        {
          source: '838644353',
          target: '-2051156789',
          label: ''
        },
        {
          source: '838644353',
          target: '838645252',
          label: ''
        },
        {
          source: '838645248',
          target: '838645252',
          label: ''
        },
        {
          source: '-2051156755',
          target: '838645252',
          label: ''
        },
        {
          source: '-2051156822',
          target: '838645252',
          label: ''
        },
        {
          source: '-2051156939',
          target: '838645252',
          label: ''
        },
        {
          source: '-2051156883',
          target: '838645252',
          label: ''
        },
        {
          source: '-2051156699',
          target: '838645252',
          label: ''
        },
        {
          source: '838644412',
          target: '838645252',
          label: '导向1'
        },
        {
          source: '838645252',
          target: '838644412',
          label: '导向2'
        },
        {
          source: '838645252',
          target: '-2051156884',
          label: '导向3'
        },
        {
          source: '-2051156789',
          target: '838644412',
          label: '导向4'
        },
        {
          source: '-2051156789',
          target: '-2051156883',
          label: '导向5'
        }
      ]
    };
    console.log('graphData.value', graphData.value);
    visgraph.drawData(graphData.value);
    visgraph.setZoom('auto');
  }, 3000);
});
</script>

<template>
  <div ref="visDom" class="graph-container"></div>
</template>

<style lang="less" scoped>
.graph-container {
  width: 100%;
  height: 100vh;
}
</style>
